<!--
 * @Author: your name
 * @Date: 2021-08-31 20:28:56
 * @LastEditTime: 2021-09-06 15:54:03
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \新建文件夹 (6)\broker\src\views\tuan\xiang.vue
-->
<template>
  <div class="home">
    <div class="head">
      <p class="left" @click="kkk">
        <van-icon name="arrow-left" />
      </p>
      <p>团购详情</p>
      <p></p>
    </div>
    <div>
      <div>
        <img class="picture" :src="`http://47.111.14.227:7001`+list.img" alt />
        <b class="name">{{list.title}}</b>
        <p class="site">{{list.address}}</p>
        <div class="time">
          <p>活动时间:{{list.time}}</p>
          <p class="person">已报名：{{list.peopleNum}}</p>
        </div>
        <div class="introduce">
          <b class="w9">团购介绍</b>
          <p class="w8">{{list.teamcontext}}</p>
        </div>
      </div>
    </div>
    <div>
      <van-swipe-cell v-for="(item,index) in dat" :key="index">
        <van-cell :border="false" value="内容">
          <div class="p9">
            <img class="p0" :src="item.c_avatar" alt />
            <div>
              <p>{{item.c_nickname}}</p>
              <p>{{item.c_phone}}</p>
            </div>
            <p class="p8" @click="xiao">
              <van-icon name="chat-o" />
            </p>
            <p class="p7" @click="dian">
              <van-icon name="phone-o" />
            </p>
          </div>
        </van-cell>

        <template #right>
          <van-button square type="danger" @click="iii(item)" text="删除" />
        </template>
      </van-swipe-cell>
    </div>
  </div>
</template>

<script>
import axios from "../../utils/axios";
export default {
  name: "Home",
  components: {},
  data() {
    return {
      list: [],
      dat: []
    };
  },
  created() {
    this.id = this.$route.params.id;
    console.log(this.id, 11);
    this.rrr();
  },
  methods: {
    rrr() {
      axios
        .post(`/groupDetail/`, {
          id: this.id
        }) 
        .then(res => {
          console.log(res);
          this.list = res.data.detail;
          this.dat = res.data.joinUserList;
        });
    },
    //删除
    iii(item) {
      axios
        .delete(`/delGroupUser/`, {
          data: {
            c_id: item.c_id,
            group_id: this.list.id
          }
        })
        .then(res => {
          console.log(res);
          this.rrr()
        });
    },
    kkk() {
      this.$router.go(-1);
    },
    //聊天
    xiao(){
      this.$router.push("/liaotian")
    },
    //电话
    dian(){
        this.$router.push("/jianpan")
    }
  }
};
</script>
<style lang='css'>
.head {
  height: 50px;
  background-color: rgb(70, 142, 224);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 9999;
}
.left {
  margin-left: 10px;
  align-items: center;
}
.picture {
  width: 93%;
  height: 200px;
  margin-left: 3%;
  margin-top: 10px;
}
.name {
  margin-left: 10px;
  margin-top: 5px;
  font-size: 20px;
}
.site {
  margin-left: 10px;
  margin-top: 10px;
}
.time {
  margin-left: 10px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
.person {
  margin-right: 10px;
}
.introduce {
  margin-left: 10px;
  margin-top: 15px;
}
.w8 {
  margin-top: 10px;
}
.w9 {
  font-size: 20px;
}
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
.van-card__thumb {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
.p0 {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.van-swipe-cell {
  height: 100px;
}
.van-button {
  height: 120px;
}
.p9 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.p8 {
  font-size: 30px;
  margin-left: 110px;
}
.p7 {
  font-size: 30px;
  margin-left: 20px;
}
.van-swipe-cell__wrapper {
  margin-top: -10px;
  height: 100px;
}
.van-cell {
  margin-top: -20px;
}
.van-cell {
  height: 105px;
}
.van-swipe-cell__right {
  margin-top: -10px;
}
.van-cell {
  margin-top: 10px;
}
</style>